<template>
	<view class="e-detail">
		<view class="info-content" v-if="formData.statusAll != 0">
			<!-- 			<image src="/static/icons/wrong.png" style="width: 30rpx;height: 30rpx;margin: 0 20rpx;"></image>
			<view>当前设备异常，暂无法使用</view> -->
			<image src="/static/icons/wrong.png" style="width: 30rpx;height: 30rpx;margin-left: 20rpx;"></image>
			<u-notice-bar :text="errorText" bgColor="#fff" color="#D91A1A" speed="40" fontSize="15"></u-notice-bar>
		</view>
		<equip-detail :form="formData" :status="formatStatus.status" :className="formatStatus.type"></equip-detail>
		<view>
			<!-- 外借情况显示出库台账 -->
			<view v-if="formData.statusLend == 2">
				<view class="detail-title">
					出库台账
				</view>
				<view class="detail-box">
					<store-table :titleList="titleList3" :dataList="dataList3"></store-table>
				</view>
			</view>
			<view>
				<view class="detail-title">
					电量台账
				</view>
				<view class="detail-box">
					<store-table :titleList="titleList" :dataList="dataList"></store-table>
				</view>
			</view>
			<view>
				<view class="detail-title">
					检测台账
				</view>
				<view class="detail-box">
					<store-table :titleList="titleList1" :dataList="dataList1"></store-table>
				</view>
			</view>
			<view>
				<view class="detail-title">
					故障台账
				</view>
				<view class="detail-box">
					<store-table :titleList="titleList2" :dataList="dataList2"></store-table>
				</view>
			</view>
			<!-- 循环有获取不到值的副作用 -->
			<!-- 		<view v-for="(item, index) in list" :key="index">
			<view class="detail-title">
				{{item.label}}
			</view>
			<view class="detail-box">
				<store-table :titleList="$data[item.titleKey]" :dataList="$data[item.dataKey]"></store-table>
			</view>
		</view> -->
			<u-gap height="20"></u-gap>
		</view>
	</view>
</template>

<script>
	import {
		list,
		titleList,
		titleList1,
		titleList2,
		titleList3,
		dataList,
		dataList1,
		dataList2,
		dataList3,
		detailList
	} from './detailData.js'
	import {
		baseUrl
	} from '@/request/request.js'
	export default {
		data() {
			return {
				show: false,
				formData: {
					id: ''
				},
				errorText: '当前设备异常，暂无法使用',
				list: list,
				detailList: detailList,
				titleList: titleList,
				titleList1: titleList1,
				titleList2: titleList2,
				titleList3: titleList3,
				dataList: [],
				dataList1: [],
				dataList2: [],
				dataList3: []
			}
		},
		onLoad(option) {
			this.formData.id = option.id
			// 去除出库台账
			// this.list.shift()
			this.getDeviceDetailList()
			setTimeout(() => {
				this.show = true
			}, 1000)
		},
		computed: {
			formatStatus() {
				if (this.formData.statusAll == 0) {
					return {
						type: 'success',
						status: '正常'
					}
				}
				return {
					type: 'error',
					status: '异常'
				}
			}
		},
		methods: {
			getDeviceDetailList() {
				this.$api.getDeviceDetailList(this.formData.id).then(res => {
					this.formData = res.data
					let arr = {
						'status': ['', '故障', '返厂'],
						'statusCharge': ['', '未充电'],
						'statusExchange': ['', '未换电'],
						'statusLend': ['', '外借'],
						'statusStore': ['', '出库'],
						'statusTestOver': ['', '未检测']
					}
					let status = ''
					Object.keys(arr).map(item => {
						if (arr[item][this.formData[item] - 1]) {
							status = status + arr[item][this.formData[item] - 1]
						}
					})
					this.errorText = `当前设备${status}，暂无法使用`
					this.getChange()
					this.getInOut()
					this.getTrouble()
					this.getTest()
				})
			},
			// 电量台账
			getChange() {
				this.dataList = dataList.map(item => {
					item.list = item.list.map(data => {
						data.value = data.key ? this.formData[data.key] : data.value
						return data
					})
					item.content = item.content.map(data => {
						data.value = data.key ? this.formData[data.key] : data.value
						return data
					})
					return item
				})
				this.dataList[0].fileList = this.formData.chargeFile ? [{
					url: baseUrl + '/' + this.formData.chargeFile.uploadName
				}] : []
				this.dataList[1].fileList = this.formData.exchangeFile ? [{
					url: baseUrl + '/' + this.formData.exchangeFile.uploadName
				}] : []
			},
			// 出入库台账
			getInOut() {
				if (this.formData.inOutLogDTOList && this.formData.inOutLogDTOList.length) {
					let formData = this.formData.inOutLogDTOList[0]
					formData = Object.assign(formData, formData.applicantUser)
					this.dataList3 = dataList3.map(item => {
						item.list = item.list.map(data => {
							data.value = data.key ? formData[data.key] : data.value
							return data
						})
						item.content = item.content.map(data => {
							data.value = data.key ? formData[data.key] : data.value
							return data
						})
						item.detail = item.detail.map(data => {
							data.value = data.key ? formData[data.key] : data.value
							return data
						})
						return item
					})
				}
			},
			// 故障台账
			getTrouble() {
				this.dataList2 = this.formData.troubleDTOList.map(item => {
					item = Object.assign(item, item.maintainDTO)
					let obj = JSON.parse(JSON.stringify(dataList2[0]))
					obj.list = obj.list.map(data => {
						data.value = item[data.key]
						if (data.key == 'status') {
							const enmu = ['正常使用', '不可使用', '返厂维修']
							data.value = enmu[data.value - 1]
						}
						return data
					})
					obj.content = obj.content.map(data => {
						data.value = item[data.key]
						return data
					})
					if (item.status == '3') {
						obj.detail = obj.detail.map(data => {
							data.value = item[data.key]
							return data
						})
					} else {
						obj.detail = null
					}
					obj.fileList = item.troubleFiles.map(data => {
						return {
							url: baseUrl + '/' + data.uploadName
						}
					})
					return obj
				})
			},
			getTest() {
				this.dataList1 = this.formData.testDTOList.map(item => {
					// item = Object.assign(item, item.maintainDTO)
					let obj = JSON.parse(JSON.stringify(dataList1[0]))
					obj.list = obj.list.map(data => {
						data.value = item[data.key]
						return data
					})
					obj.content = obj.content.map(data => {
						data.value = item[data.key]
						return data
					})
					obj.fileList = item.testFiles.map(data => {
						return {
							url: baseUrl + '/' + data.uploadName
						}
					})
					return obj
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.e-detail {
		padding: 30rpx;
		background: linear-gradient(#0e64fe, #F7F8FA); //从上到下
		height: 200px;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.detail-title {
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		margin: 30rpx 0;
		padding-left: 20rpx;
		border-left: 4rpx solid #0E64FE;
	}

	.info-content {
		border-radius: 10rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		display: flex;
		background-color: #fff;
		align-items: center;
	}
</style>